<template>
  <div class="home">
    <!-- container start -->
    <div class="container">
      <div class="banner">
        <!-- 轮播图-start -->
        <div class="block">
          <el-carousel height="500px" trigger="click" arrow="never">
            <el-carousel-item v-for="(item, index) in bannerData" :key="index">
              <div class="mask"></div>
              <img :src="item.img">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 轮播图-end -->
        <div class="home-title w">
          <h1 class="title">真实房源放心家</h1>

          <!-- 真实数据轮播-start -->
          <div class="realData">
            <el-carousel height="50px" :interval="5000" direction="vertical" indicator-position="none">
              <el-carousel-item v-for="(item, index) in realData" :key="index">
                <span>{{ item }}</span>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 真实数据轮播-end -->

          <!-- 搜索框-start -->
          <div class="search">
            <ul class="clearfix">
              <li :class="item.isActive ? 'active' : ''" v-for="(item, index) in searchTips" :key="index" @click="changeActive(index)">
                {{ item.tip }}
              </li>
            </ul>
            <b :style="'transform: translateX(' + tX + 'px)'"></b>
            <input class="search-box" type="text" :placeholder="placeholder" v-model="searchText" />
            <el-button class="search-btn" type="primary" icon="el-icon-search" @click="goPageWithP(searchFor, searchText)">搜索</el-button>
          </div>
          <!-- 搜索框-end -->
        </div>
      </div>

      <!-- recommend推荐卡-start -->
      <div class="recommend">
        <!-- card-start -->
        <div class="nav-card">
          <div class="card-info w">
            <el-card class="recommend-info" shadow="hover" v-for="(item, index) in cards" :key="index" @click.native='goPage(item.name)'>
              <div class="info-img">
                <img :src="item.img" ondragstart='return false;'>
              </div>
              <div class="info-title">{{ item.tip }}</div>
            </el-card>
          </div>
        </div>
        <!-- card-end -->

        <!-- recommend-shh-start -->
        <div class="recommend-shh w">
          <div class="recommend-title">
            <h3>广州精选二手房推荐</h3>
            <span class="fl">为您精选二手好房，帮您找到温馨的家</span>
            <span class="recommend-more fr" @click="goPage('Second-handHouse')">更多二手房推荐</span>
          </div>
          <div class="recommend-card">
            <el-card class="recommend-info" shadow="hover" v-for="(item, index) in shhRecommendation" :key="index" @click="goPage2(item.id)">
              <div class="recommend-img" @click="goPage2(item.id)">
                <img :src="item.img" />
              </div>
              <div class="recommend-details" @click="goPage2(item.id)">
                <h4>{{ item.title }}</h4>
                <div class="clearfix">
                  <span class="type fl">{{ item.type }}</span>
                  <span class="area fl">建面{{ item.area }}㎡</span>
                  <span class="price fr">{{ item.price }}万</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <!-- recommend-shh-end -->

        <!-- recommend-estate-start -->
        <div class="recommend-estate">
          <div class="w">
            <div class="recommend-title">
              <h3>广州精选小区推荐</h3>
              <span class="fl">网罗优质小区，尽享精致生活</span>
              <span class="recommend-more fr" @click="goPage('Estate')">更多小区推荐</span>
            </div>
            <div class="recommend-card">
              <div class="estate-info" v-for="(item, index) in estateRecommendation" :key="index" @click="goPage3(item.id)">
                <div class="img">
                  <img :src="item.img" />
                </div>
                <div class="mask"></div>
                <div class="text">
                  <h1>{{ item.name }}</h1>
                  <span>{{ item.price }}元/㎡</span>
                </div>
              </div>
            </div>
          </div>
          <!-- recommend-estate-end -->
        </div>

        <!-- recommend-renting-start -->
        <!-- <div class="recommend-renting w">
          <div class="recommend-title">
            <h3>广州精选租房推荐</h3>
            <span class="fl">精选租房，舒适省心，用心只为您顺心</span>
            <span class="recommend-more fr" @click="goPage('Renting')">更多租房推荐</span>
          </div>
          <div class="recommend-card">
            <el-card class="recommend-info" shadow="hover" v-for="(item, index) in shhRecommendation" :key="index">
              <div class="recommend-img">
                <img :src="item.img" />
              </div>
              <div class="recommend-details">
                <h4>{{ item.title }}</h4>
                <div class="clearfix">
                  <span class="type fl">{{ item.type }}</span>
                  <span class="area fl">建面{{ item.area }}㎡</span>
                  <span class="price fr">{{ item.price }}元/月</span>
                </div>
              </div>
            </el-card>
          </div>
        </div> -->
        <!-- recommend-renting-end -->
      </div>
      <!-- recommend-end -->
    </div>
    <!-- container end -->

  </div>
</template>

<script>
import "@/assets/less/base.less";
import "@/assets/less/home.less";
export default {
  name: "Home",

  data() {
    return {
      bannerData: [
        { img: require("@/assets/images/banner.jpg") },
        { img: require("@/assets/images/banner2.jpg") },
        { img: require("@/assets/images/banner3.jpg") },
        { img: require("@/assets/images/banner4.jpg") },
      ],
      // 真实数据汇总
      realData: [
        "广州真实小区信息 13156 个",
        "广州真实在售二手房 23625 套",
        "上月真实已售二手房 1105 套",
      ],

      placeholder: "",

      // 搜索关键词
      searchTips: [
        {
          tip: "二手房",
          name: "Second-handHouse",
          isActive: false,
          placeholder: "请输入小区名、地址等关键词查找二手房",
          tX: 5,
        },
        {
          tip: "小区",
          name: "Estate",
          isActive: false,
          placeholder: "请输入小区名、地址等关键词查找小区",
          tX: 78,
        },
        // {
        //   tip: "学校",
        //   name: "School",
        //   isActive: false,
        //   placeholder: "请输入小学、初中或小区名等关键词查找学校",
        //   tX: 139,
        // },
        // {
        //   tip: "租房",
        //   name: "Renting",
        //   isActive: false,
        //   placeholder: "请输入小区名、地址等关键词查找租房",
        //   tX: 70,
        // },
      ],

      // 推荐卡片
      cards: [
        {
          tip: "二手房",
          img: require("@/assets/images/second-handHouse.png"),
          name: "Second-handHouse",
        },
        {
          tip: "小区",
          img: require("@/assets/images/estate.png"),
          name: "Estate",
        },
        // {
        //   tip: "学校",
        //   img: require("@/assets/images/school.png"),
        //   name: "School",
        // },
        {
          tip: "卖房",
          img: require("@/assets/images/renting.png"),
          name: "SellingHouse",
        },
      ],

      tX: 0,

      searchFor: "",// 搜索对象
      searchText: '',// 搜索内容
      // 二手房推荐
      shhRecommendation: [
        {
          id: 1,
          title: "普装2室诚心出售",
          img:
            "https://fang-community.leyoujia.com/community/hsl-lensman/2020-07/14/16/Fiumk7gO8sHGUwiIIjknMSCZvKgc.jpg?imageView2/1/w/400/h/300",
          type: "普通住宅",
          area: "77.08",
          price: "82",
        },
        {
          id: 2,
          title: "合景天峻 1房1厅1卫 35㎡",
          img:
            "https://fang-community.leyoujia.com//community/hsl-album/2020-08/30/20/b3afd6fb-1781-480b-8e91-f9af2fb7d600.jpg?imageView2/1/w/400/h/300",
          type: "公寓",
          area: "35",
          price: "63",
        },
        {
          id: 3,
          title: "优山悦海毛坯三房业主诚心出售",
          img:
            "https://fang-community.leyoujia.com/pic/hsl/2018-07/14/Flzg-_oUrAmfolV4ovhqGQCLvedG.jpg?imageView2/1/w/400/h/300",
          type: "普通住宅",
          area: "104.73",
          price: "246",
        },
        {
          id: 4,
          title: "电梯3房，高楼层，视野好采光好",
          img:
            "https://fang-community.leyoujia.com/community/hsl-lensman/2020-05/31/23/loX90eRbMzAaRmh_jHakyalx_mMN.jpg?imageView2/1/w/400/h/300",
          type: "普通住宅",
          area: "110.2",
          price: "280",
        },
      ],

      // 小区推荐
      estateRecommendation: [
        {
          id: 1,
          name: "海伦堡花园",
          price: "20618",
          img:
            "https://fang-community.leyoujia.com/pic/hsl/2019-01/10/88013434-539e-4d61-a831-735f47f121a9.JPG?imageView2/1/w/752/h/566",
        },

        {
          id: 2,
          name: "广华苑",
          price: "27821",
          img:
            "https://fang-community.leyoujia.com/pic/hsl/2018-12/13/fa2a9369-5e0f-48aa-8cac-ef29f96667fd.JPG?imageView2/1/w/752/h/566",
        },

        {
          id: 3,
          name: "侨诚花园",
          price: "34758",
          img:
            "https://fang-community.leyoujia.com/pic/hsl/2018-12/06/150f0c69-917b-4ed1-8fba-caf31d9f3ff8.JPG?imageView2/1/w/752/h/566",
        },
      ],
    };
  },

  created() {
    let isLogin = false;
    if (this.$cookies.get('__tk')) {
      isLogin = true;
    } else {
      isLogin = false;
    }
    console.log('Home isLogin==>', isLogin)
    let oj = {
      title: '落新家',
      nav: 'Home',
      isLogin: isLogin,
    };
    this.$emit('isTitle', oj);
    this.searchTips[0].isActive = true;
    this.placeholder = this.searchTips[0].placeholder;
    this.tX = this.searchTips[0].tX;
    this.searchFor = this.searchTips[0].name;
  },

  methods: {
    // 带参数跳转
    goPageWithP(n, i) {
      this.$router.push({
        name: n,
        params: {
          text: i
        }
      });
    },
    // 跳转
    goPage(n) {
      this.$router.push({ name: n });
    },
    // 跳转
    goPage2(i) {
      let routeUrl = this.$router.resolve(`/house_detail/${i}`);
      window.open(routeUrl.href, "_blank");
    },
    // 跳转
    goPage3(i) {
      let routeUrl = this.$router.resolve(`/estate_detail/${i}`);
      window.open(routeUrl.href, "_blank");
    },
    // 切换搜索对象
    changeActive(i) {
      if (this.searchTips[i].isActive == true) {
        return;
      }
      // console.log(i)
      for (let key of this.searchTips) {
        if (key.isActive == true) {
          key.isActive = false;
          break;
        }
      }
      this.searchTips[i].isActive = true;
      this.placeholder = this.searchTips[i].placeholder;
      this.tX = this.searchTips[i].tX;
      this.searchFor = this.searchTips[i].name;
    },
  },
};
</script>
